{% extends "base.html" %}
{% block title %}创建statefulset页面{% endblock %}
{% block workload %}layui-nav-itemed{% endblock %}
{% block workload_statefulset %}layui-this{% endblock %}
{% block body %}
    <span class="layui-breadcrumb span-float" lay-separator="/">
      <a href="/">首页</a>
      <a href='{% url "workload:statefulset" %}'>工作负载</a>
      <a href='{% url "workload:statefulset" %}'>statefulset</a>
      <a><cite>创建statefulset</cite></a>
   </span>
    <form class="layui-form layui-form-pane" action="" style="margin-left: 10px; margin-top: 10px; margin-right: 10px;">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" autocomplete="off" lay-verify="required" placeholder="请输入statefulset名称"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">namespace</label>
            <div class="layui-input-block layui-form">
                <select name="statefulset_namespace" id="statefulset_namespace" lay-filter="statefulset_namespace"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">镜像名</label>
            <div class="layui-input-block">
                <input type="text" name="image-name" autocomplete="off" lay-verify="required" placeholder="请输入镜像名"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">副本数</label>
            <div class="layui-input-block">
                <input type="number" name="replica" autocomplete="off" lay-verify="required" placeholder="请输入副本数"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标签</label>
            <div class="layui-input-block">
                <input type="text" name="labels" autocomplete="off" placeholder="标签示例：app=nginx,project=devops"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" pane="">
            <label class="layui-form-label">资源限制</label>
            <div class="layui-input-block">
                <input type="radio" name="limit" value="0.5C1G" title="0.5C1G" checked="">
                <input type="radio" name="limit" value="1C2G" title="1C2G">
                <input type="radio" name="limit" value="2C4G" title="2C4G">
                <input type="radio" name="limit" value="4C4G" title="4C4G">
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" lay-submit="" lay-filter="submit">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
{% endblock %}

{% block js %}
    <script>
        layui.use(['form', 'layedit', 'laydate', 'jquery'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate
                , $ = layui.jquery;

            // select 动态获取内容
            $.ajax({
                type: "GET",
                url: '{% url "namespace_api" %}',
                async: false,
                success: function (res) {
                    let statefulset_select = $("#statefulset_namespace")
                    if (res.code == 0) {
                        //遍历数据
                        $.each(res.data, function (index) {
                            ns = res.data[index];
                            statefulset_select.append('<option value=' + ns.name + '>' + ns.name + '</option>')
                        })
                        statefulset_select.val(namespace)
                        form.render(statefulset_select)
                    } else {
                        layer.msg(res.msg)
                        statefulset_select.append('<option value=' + 'default' + '>' + res.msg + '</option>')
                    }
                },
                error: function (res) {
                    layer.msg("服务器接口异常")
                }
            })

            //监听提交
            form.on('submit(submit)', function (data) {
                data = data.field;
                csrf_token = $('[name="csrfmiddlewaretoken"]').val();
                data['csrfmiddlewaretoken'] = csrf_token;
                $.ajax({
                    url: {% url "statefulset_api" %},
                    type: "POST",
                    data: data,
                    dataType: 'json',
                    success: function (res) {
                        if (res.code == '0') {
                            layer.msg(res.msg, {icon: 6});
                            document.location.href = "{% url 'workload:statefulset' %}", true;
                        } else {
                            layer.msg(res.msg, {icon: 5})
                        }
                    }, error: function (res){
                        layer.msg(res.msg, {icon: 5});
                    }
                })
                return false;
            });

        });
    </script>
{% endblock %}
